<template>
  <div class="exam-center">
    <div class="chatMessage">
      <ChatHearing
        ref="chatRef"
        :key="selectId"
        :selectId="selectId"
        :list="props.list"
        :question="question"
        :exts="exts"
        :fileList="fileList"
        :hearingRoleList="hearingRoleObj.data"
        @aiAnswerOrer="aiAnswerOrer"
        @roleConfirm="roleConfirm"
      >
        <template #input>
          <div class="sendMessage">
            <el-input
              class="elInput"
              v-model="question"
              :rows="1"
              resize="none"
              type="textarea"
              @focus="changeBorderColor(1)"
              @blur="changeBorderColor(0)"
              @keydown.enter.prevent="keydownHandle"
              placeholder="请输入问题，可通过Shift+Enter换行"
            />
            <img v-show="question" @click="chatStart" :src="sendSvg" alt="" srcset="" />
            <img v-show="!question" :src="sendNoSvg" alt="" srcset="" />
          </div>
        </template>
      </ChatHearing>
    </div>
  </div>
</template>

<script setup lang="ts">
import _ from 'lodash';
import { ref } from 'vue';
import sendSvg from '@/assets/ai/send.svg';
import sendNoSvg from '@/assets/ai/send-no.svg';
import ChatHearing from '@/views/chat/indexHearing.vue';

const props = defineProps({
  themeTeachingPlan: {
    type: Array,
    default: () => [],
  },
  selectId: {
    type: String,
    default: () => '',
  },
  list: {
    type: Array,
    default: () => [],
  },
  exts: {
    type: Object,
    default: () => {},
  },
  fileList: Array,
  hearingRoleObj: Object as any,
});

const question = ref('');
const chatRef = ref();

const changeBorderColor = (v: any) => {
  chatRef.value.changeBorderColor(v);
};

const keydownHandle = (e: any) => {
  if (e.keyCode === 13 && e.shiftKey) {
    return false;
  }
  if (e.keyCode === 13) {
    const questionTemp = _.cloneDeep(question.value);
    chatRef.value.keydownHandle(e, questionTemp);
    question.value = '';
  }
};

const chatStart = () => {
  const questionTemp = _.cloneDeep(question.value);
  chatRef.value.chatQuestion(questionTemp);
  question.value = '';
};

// 新建对话
const newSpeak = (callback: Function) => {
  chatRef.value.newSpeak(callback);
};

const emits = defineEmits(['aiAnswerOrer', 'roleConfirm']);
// ai 对话结束
const aiAnswerOrer = (id: any) => {
  emits('aiAnswerOrer', id);
};

const roleConfirm = (list: any) => {
  emits('roleConfirm', list);
};

defineExpose({
  newSpeak,
});
</script>

<style lang="scss">
.exam-center {
  // border: 1px solid red;
  height: 100%;
  margin: 0 10px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .chatMessage {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: scroll;

    .chatListContent {
      margin-bottom: 10px;
    }
  }
}

.sendMessage {
  width: 100%;
  margin-top: auto;
  height: 56px;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  border: 1px solid #eeeeee;
  display: flex;
  align-items: center;
  padding: 0 10px 0 0;
  box-sizing: border-box;

  .elInput {
    flex: 1;

    .el-input__wrapper,
    .el-textarea__inner {
      box-shadow: none;
    }
  }

  img {
    width: 32px;
    height: 32px;
    cursor: pointer;
  }
}
</style>
